<template>
  <div>
    <el-form ref="form" label-width="80px" :model="skuInfo">
      <el-form-item label="SPU名称">
        {{ spu.spuName }}
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="sku名称" v-model="skuInfo.skuName"></el-input>
      </el-form-item>

      <el-form-item label="价格(元)">
        <el-input type="number" min="1" placeholder="0" v-model="skuInfo.price"></el-input>
      </el-form-item>

      <el-form-item label="重量(千克)">
        <el-input placeholder="重量(千克)" v-model="skuInfo.weight"></el-input>
      </el-form-item>

      <el-form-item label="规格描述">
        <el-input type="textarea" rows="4" v-model="skuInfo.skuDesc"></el-input>
      </el-form-item>

      <el-form-item label="平台属性">
        <el-form :inline="true" label-width="80px">
          <el-form-item style="margin-bottom:5px" :label="attr.attrName" v-for="attr in attrInfoList" :key="attr.id">
            <el-select placeholder="请选择" v-model="attr.attrIdAndValueId">
              <!-- v-model在这里收集的是value的属性值 -->
              <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`"
                v-for="attrValue in attr.attrValueList" :key="attrValue.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="销售属性">
        <el-form :inline="true" label-width="80px">
          <el-form-item :label="saleAttr.saleAttrName" v-for="saleAttr in spuSaleAttrList" :key="saleAttr.id">
            <el-select v-model="saleAttr.attrIdAndValueId" placeholder="请选择">
              <el-option :value="`${saleAttr.id}:${saleAttrValue.id}`" :label="saleAttrValue.saleAttrValueName"
                v-for="saleAttrValue in saleAttr.spuSaleAttrValueList" :key="saleAttrValue.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="图片列表">
        <!-- data是table标签用来展示的数据 -->
        <!-- @selection-change当复选框按钮状态发生改变时触发 -->
        <el-table :data="skuImageList" border style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column label="图片" align="center">
            <!-- 作用域插槽：用于在elementui中自定义结构 row是data数据中的每一个元素,index是每个元素的索引值 -->
            <template slot-scope="{row,$index}">
              <img :src="row.imgUrl" alt="" style="width:100px">
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称"  align="center"></el-table-column>
          <el-table-column  label="操作" align="center">
            <template slot-scope="{row}">
              <el-button type="primary" plain v-if="row.isDefault==0" @click="defaultSettings(row)">设置默认</el-button>
              <el-button type="success" plain v-else>默认图片</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" plain style="margin-top:5px" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
     
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'addSku',
  data() {
    return {
      //用来渲染页面
      skuImageList: [], // 图片信息
      spuSaleAttrList: [],// 销售属性
      attrInfoList: [],//平台属性的数据

      // 父组件的数据，用于渲染页面
      spu: {},

      // 收集数据，保存->带给服务器的数据
      skuInfo: {
        // 第一类数据：父组件给的数据
        category3Id: 0,
        spuId: 0,
        tmId: 0,
        // 第二类：需要通过数据双向绑定v-modele收集
        skuName: '',//sku名称
        price: 0,//价格
        weight: "",//重量
        skuDesc: '',//规格描述
        // 第三类:收集图片
        // 默认图片
        skuDefaultImg: "",
        // 图片
        skuImageList: [
          // {
          //   id: 0,
          //   imgName: "",
          //   imgUrl: "",
          //   isDefault: "",
          //   spuImgId: 0
          // }
        ],
        // 平台属性
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   valueId: 0,
          // }
        ],
        // 销售属性
        skuSaleAttrValueList: [
          // {
          //   saleAttrId: 0,
          //   saleAttrValueId: 0,
          // }
        ],
      },
      // 复选框勾选的图片信息
      imageList:[]
    }
  },
  methods: {
    async getData(spu, categoryId) {//categoryId接收的是一个对象(一二三级id)
      // 收集父组件给的数据
      this.spu = spu
      this.skuInfo.category3Id = spu.category3Id
      this.skuInfo.spuId = spu.id
      this.skuInfo.tmId = spu.tmId

      try {
        // 获取图片数据
        const result = await this.$API.spu.reqGetImages(spu.id)
        if (result.code == 200) {
          // 服务器返回的数据,没有带有isDefault字段,但是点击发送的时候需要该字段
          // 将服务器返回的字段手动加上isDefault字段
          let list=result.data
          list.forEach(item=>{
            item.isDefault=0//设置默认值为0
          })
          this.skuImageList = list
        }

        // 获取销售属性数据
        const result1 = await this.$API.spu.reqSpuSaleAttr(spu.id)
        if (result1.code == 200) this.spuSaleAttrList = result1.data

        // 获取平台属性数据
        const result2 = await this.$API.spu.reqAttrInfoList(categoryId)
        if (result2.code == 200) this.attrInfoList = result2.data


      } catch (error) {
        this.$message(`${error}`)
      }

    },
    // 设置默认图片
    defaultSettings(row){
      // row：当前点击的这一行数据
      // 使用排他思想，将图片列表数据的isDefault字段全部变成0
      this.skuImageList.forEach(item=>{
        item.isDefault=0
      })
      // 点击的这个变为1  0代表没有设置为默认图片 1代表当前的图片是默认图片
      row.isDefault=1
      
      // 保存当前设置为默认图片的数据，将来带给服务器
      this.skuInfo.skuDefaultImg=row.imgUrl
    },
    // 复选框按钮状态发生改变时调用
    handleSelectionChange(params){
      // params：是当前勾选的这一行图片数据
      // 保存到将来带给服务器的数据里面
      this.imageList=params
    },
    // 取消按钮
    cancel() {
      // 向父组件通信，切换页面为0
      this.$emit('changeScenarios', { scene: 0, flag: '取消' })

      // 清空data中的所有数据
      Object.assign(this._data,this.$options.data())
    },
    // 保存按钮 发请求，将收集到的数据发给服务器
    async save(){
      // 把参数数据整理为服务器需要的参数

      const {skuInfo,attrInfoList,spuSaleAttrList,imageList}=this

      // 整理平台属性的参数
      attrInfoList.forEach(item=>{
        //如果有这个attrIdAndValueId属性，那么就是select标签就是选择了
        if(item.attrIdAndValueId){
          // 分割
          let [attrId,valueId]=item.attrIdAndValueId.split(':');
          // 赋值给带给服务器的参数
          skuInfo.skuAttrValueList.push({attrId,valueId})
        }
      })
      
      // 整理销售属性的参数
      spuSaleAttrList.forEach(item=>{
        if(item.attrIdAndValueId){
          // const [saleAttrId,saleAttrValueId]=item.attrIdAndValueId.split(':');
          const saleAttrId=item.attrIdAndValueId.split(':')[0];
          const saleAttrValueId=item.attrIdAndValueId.split(':')[1];
          skuInfo.skuSaleAttrValueList.push({saleAttrId,saleAttrValueId})
        }
      })


      
      // 整理图片数据
      // map()映射,返回一个指定格式的数据
      skuInfo.skuImageList= imageList.map(item=>{
        return {
            imgName: item.imgName,
            imgUrl: item.imgUrl,
            isDefault: item.isDefault,
            spuImgId: item.id
          }
      })
      // skuInfo.skuImageList.push(img)


      if(skuInfo.skuName.trim()==""||skuInfo.weight.trim()==""){
        this.$message('SKU名称/重量不能为空')
        return false
      }else{
        try {
          // 发请求，将整理好服务器需要的参数带给服务器
          const result=await this.$API.spu.reqAddSku(skuInfo)
          if(result.code==200){
            this.$message({type:'success',message:'添加SKU成功'})
          }
        } catch (error) {
          // this.$message({type:'danger',message:`${error.message}`})
          console.log(error.message);
        }
      }
    }
  }
}
</script>

<style>
</style>